<template>
	<view class="user-list-box">
		<scroll-view class="user-list" scroll-y="true">
			<view class="user-item" v-for="item of users">
				<view class="avatar-box" @click="jumpToUserInfo(item.id)">
					<image class="avatar-img" :src="item.user.avatar"></image>
					<image class="sex-img"
						:src="item.user.sex === 1 ? '/static/portraitTagBoy-s.png' : '/static/portraitTagGirl-s.png'">
					</image>
				</view>
				<view class="user-content">
					<text class="user-name">{{ item.user.nickName }}</text>
					<text class="create-time">{{ item.user.signature ? item.user.signature : '这家伙很懒什么都没写...' }}</text>
				</view>
				<view class="button" @click="item.user.follow ? followUser(item.user) : chat()">{{ item.user.follow ? '关注' : '私聊' }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"userList",
		data() {
			return {
				users: [],
				pageNum: 1
			};
		},
		props: {
			type: Number,
			userId: {
				type: Number,
				default: null
			}
		},
		mounted() {
			this.getUserList();
		},
		methods: {
			jumpToUserInfo(id) {
				uni.navigateTo({
					url: '/pages/userDetai?userId=' + id
				})
			},
			getUserList() {
				let params = {
					pageSize: 50,
					pageNum: this.pageNum
				}
				if (this.type) {
					params.isFans = true;
				}
				if (this.userId) {
					params.userId = this.userId;
				}
				this.$apis.getFollowOrFans(params).then(res => {
					if (res.code === 0) {
						this.users = res.data.list;
					}
				});
			},
			followUser(user) {
				const params = {
					userId: user.id,
					status: 1
				}
				this.$apis.followUser(params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '关注成功!',
							icon: 'success'
						});
						let index = this.users.findIndex(item => item === user);
						if (index !== -1) {
							this.users[index].follow = true;
						}
					}
				})
			},
			chat() {
				
			}
		}
	}
</script>

<style lang="scss">
	.user-list-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		.user-list {
			width: 100%;
			height: 100%;
			
			.user-item {
				width: 654rpx;
				padding: 40rpx 0;
				margin-left: 48rpx;
				display: flex;
				align-items: center;
			
				.avatar-box {
					width: 80rpx;
					height: 80rpx;
					position: relative;
			
					.avatar-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
					}
			
					.sex-img {
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			
				.user-content {
					margin-left: 32rpx;
					width: 430rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
			
					.user-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}
			
					.create-time {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 8rpx;
					}
				}
			
				.button {
					width: 112rpx;
					height: 64rpx;
					border-radius: 32rpx;
					border: 2rpx solid #F0F3F6;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					text-align: center;
					line-height: 64rpx;
				}
			}
		}
	}
</style>